<template>
  <view class="box">
   <view class="box1">
      <view class="box12">
       <view class="box13">默认</view>
       <view class="box14">上海市宝山区张庙街道</view>
       <view class="box15">
        泗塘四村62号楼
       </view>
       <view class="box16">></view>
       <view class="box17">李明</view>
       <view class="box18">186****112</view>
       <view class="box19"> <image src="/static/image19.png" /></view>
      </view>
      <view class="box2">
        <view class="box21">
          <image src="/static/image7.png" />
        </view>
        <view class="box22">男运动鞋秋季男鞋青少年正品透...</view>
        <view class="box23">标准白;42</view>
        <view class="box24">￥890.00</view>
        <view class="box25">×1</view>
        <view class="box26">
          优惠金额
        </view>
        <view class="box27">￥25</view>
        <view class="box28">运费</view>
        <view class="box29">免运费</view>
        <view class="box30">实付金额</view>
        <view class="box31">￥865</view>
        <view class="box32">备注</view>
        <view class="box33">请填写备注</view>
      </view>
      <view class="box4">
        <view class="box41"> <image src="/static/image20.png" /></view>
        <view class="box42">微信支付</view>
        <view class="box43">
          <uv-checkbox-group 
			v-model="checkboxValue" 
			shape="circle">
			<uv-checkbox 
				:customStyle="{marginBottom: '8px'}" 
				v-for="(item, index) in checkboxList" 
				:key="index" :label="item.name" 
				:name="item.name"
			></uv-checkbox>
		</uv-checkbox-group>
        </view>
        <view class="box44">
          <image src="/static/image21.png"></image>
        </view>
        <view class="box45">支付宝</view>
        <view class="box43">
          <uv-checkbox-group 
			v-model="checkboxValue" 
			shape="circle">
			<uv-checkbox 
				:customStyle="{marginBottom: '8px'}" 
				v-for="(item, index) in checkboxList" 
				:key="index" :label="item.name" 
				:name="item.name"
			></uv-checkbox>
		</uv-checkbox-group>
        </view>
        <view class="box46">
          <image src="/static/image22.png"></image>
        </view>
        <view class="box47">余额</view>
        <view class="box43">
          <uv-checkbox-group 
			v-model="checkboxValue" 
			shape="circle">
			<uv-checkbox 
				:customStyle="{marginBottom: '8px'}" 
				v-for="(item, index) in checkboxList" 
				:key="index" :label="item.name" 
				:name="item.name"
			></uv-checkbox>
		</uv-checkbox-group>
        </view>
      </view>
      <view class="box5">
        <view class="box51">
         合计:
        </view>
        <view class="box52">￥890.00</view>
        <view class="box53">
          <uv-button type="primary" color="red" shape="circle" text="立即支付"></uv-button>
        </view>
      </view>
   </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        checkboxValue:['苹果'],
        checkboxList: [{
					name: '',
					disabled: false
				}, ]
      }
    },
    methods: {
      
    }
  }
</script>

<style>
.box53{
  width: 230rpx;
  margin-left: 490rpx;
  margin-top: -70rpx;
}
.box52{
  margin-left: 140rpx;
  color: red;
  font-size: 48rpx;
  margin-top: -58rpx;
}
.box51{
  font-size: 40rpx;
  margin-left: 30rpx;
  margin-top: 66rpx;
}
.box5{
  background-color: white;
  margin-top:1470rpx;
  position: absolute;
  width: 750rpx;

  height: 180rpx;
  
}
.box47{
  margin-left: 100rpx;
  margin-top: -63rpx;
}
.box46 image{
  margin-top: 50rpx;
  margin-left: 10rpx;
  width: 70rpx;
  height: 70rpx;
}
.box45{
  margin-left: 100rpx;
  margin-top: -56rpx;
}
.box44 image{
  margin-top: 50rpx;
  margin-left: 10rpx;
  width: 65rpx;
  height: 65rpx;
}
.box43{
  margin-left: 620rpx;
  margin-top: -35rpx;
}
.box42{
  margin-left: 100rpx;
  margin-top: -65rpx;
}
.box41 image{
  margin-top: 35rpx;
  width: 90rpx;
  height: 70rpx;
}
.box4{
  background-color: white;
  margin-top:1060rpx;
  position: absolute;
  width: 700rpx;
  margin-left: 25rpx;
  height: 370rpx;
  border-radius: 25rpx;
}
.box33{
  margin-left: 500rpx;
  color: darkgray;
  margin-top: -40rpx;
}
.box32{
  margin-left: 25rpx;
  margin-top: 50rpx;
  color: rgb(96, 95, 95);
}
.box31{
  margin-left: 580rpx;
  margin-top: -40rpx;
}
.box30{
  margin-left: 25rpx;
  margin-top: 50rpx;
  color: rgb(96, 95, 95);
}
.box29{
  margin-left: 560rpx;
  margin-top: -40rpx;
}
.box28{
  margin-left: 25rpx;
  margin-top: 50rpx;
  color: rgb(96, 95, 95);
}
.box27{
  margin-left: 600rpx;
  margin-top: -40rpx;
}
.box26{
  margin-top: 80rpx;
  margin-left: 25rpx;
  color: rgb(96, 95, 95);
}
.box25{
  margin-left:440rpx;
  margin-top: -38rpx;
  color: darkgray;
  font-size: 27rpx;
}
.box24{
  margin-left: 290rpx;
  margin-top: 70rpx;
  font-size: 35rpx;
  color: red;
}
.box23{
  margin-left:290rpx;
  font-size: 27rpx;
  margin-top: 20rpx;
  color: darkgray;
}
.box22{
  margin-left: 280rpx;
  margin-top: -250rpx;
  font-size: 28.5rpx;
  /* font-weight:500; */
}
.box21 image{
  width: 270rpx;
  height: 260rpx;
  margin-left: 10rpx;
  margin-top: 20rpx;
}
.box2{
  background-color: white;
  margin-top:320rpx;
  position: absolute;
  width: 700rpx;
  margin-left: 25rpx;
  height: 700rpx;
  border-radius: 25rpx;
}
.box19 image{
  margin-top: 0rpx;
  /* position: absolute; */
  width: 700rpx;
  height: 50rpx;
}
.box18{
  margin-left: 120rpx;
  margin-top: -40rpx;
}
.box17{
  margin-left: 30rpx;
  margin-top: -25rpx;
}
.box16{
  margin-left: 620rpx;
  margin-top: -22rpx;
  font-size: 45rpx;
  color: darkgray;
}
.box15{
  margin-left: 30rpx;
  margin-top: 20rpx;
  font-size: 43rpx;
}
.box14{
  margin-left: 110rpx;
  margin-top: -42rpx;
  color: rgb(132, 128, 128);
}
.box13{
  margin-left: 30rpx;
  margin-top: 20rpx;
  background-color: red;
  width: 69rpx;
  color: white;
  border-radius: 7rpx;
}
.box12{
  background-color: white;
  margin-top: 30rpx;
  position: absolute;
  width: 700rpx;
  margin-left: 25rpx;
  height: 256rpx;
  border-radius: 25rpx;
}
.box{
  background-color: rgb(247, 244, 244);
  height: 1645rpx;
}
</style>
